import Fill from "ol/style/fill";
import Stroke from "ol/style/stroke";
import Style from "ol/style/style";
import Icon from "ol/style/icon";
import Circle from "ol/style/circle";
import Point from "ol/geom/point";

//红色多边形样式
function redAreaStyle(){
    let fillColor = new Fill({
        color: 'rgba(255, 0, 0, 0.2)'
    })
    let stroke = new Stroke({
        color: 'red',
        width: 1,
    })
    return new Style({
        stroke,
        fill: fillColor
    })
}

//红色船
function pointRedPlane(){
    return new Style({
        image: new Icon({
            src: require('../img/redPlane.svg'),
            scale: 0.2,  //缩放比例
        })
    })
}
//红色飞机
function pointRedShip(){
    return new Style({
        image: new Icon({
            src: require('../img/redShip.svg'),
            scale: 0.2,  //缩放比例
        })
    })
}
//红色点
function pointRed(){
    return new Style({
        image: new Circle({
            radius: 5,
            fill: new Fill({
                color: 'red'
            })
        })
    })
}

//红色轨迹线
function redLineArrow(feature) {
    let geometry = feature.getGeometry();
    let styles = [new Style({
        stroke: new Stroke({
            color: '#d71106',
            width: 2,
            lineDash: [6,5]
        })
    })];
    geometry.forEachSegment(function (start, end) {
        let dx = end[0] - start[0];
        let dy = end[1] - start[1];
        let rotation = Math.atan2(dy, dx);
        const kx = (end[0] + start[0]) / 2
        const ky = (end[1] + start[1]) / 2
        console.log(kx,ky)
        //arrows
        styles.push(new Style({
            geometry: new Point([kx, ky]),
            image: new Icon({
                src: require('../img/arrow_red.png'),
                anchor: [0.75, 0.5],
                rotateWithView: false,
                rotation: -rotation
            })
        }));
    });
    return styles
}

//临时箭头
function tempLineArrow(feature) {
    let geometry = feature.getGeometry();
    let styles = [new Style({
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2,
            lineDash: [6,5]
        })
    })];
    geometry.forEachSegment(function (start, end) {
        let dx = end[0] - start[0];
        let dy = end[1] - start[1];
        let rotation = Math.atan2(dy, dx);
        const kx = (end[0] + start[0]) / 2
        const ky = (end[1] + start[1]) / 2
        //arrows
        styles.push(new Style({
            geometry: new Point([kx, ky]),
            image: new Icon({
                src: require('../img/arrow.png'),
                anchor: [0.75, 0.5],
                rotateWithView: false,
                rotation: -rotation
            })
        }));
    });

    return styles;
}
//临时点
function positionPointTemp(){
    return new Style({
        image: new Circle({
            radius:5,
            fill:new Fill({
                color: '#ffcc33'
            })
        }),
    });
}


let mapStyle = {
    redAreaStyle,
    pointRedPlane,
    pointRedShip,
    pointRed,
    redLineArrow,
    positionPointTemp,
    tempLineArrow,
}
export default mapStyle